<template>
    <div class="sign">
        <div class="signHead">
            <el-form ref="signFormRef" :model="signForm" label-width="auto" status-icon>
                <el-row>
                    <el-col style="margin-right: 20px;" :span="5">
                        <el-form-item label="签到状态" prop="checkStatus">
                        <el-select v-model="signForm.checkStatus" placeholder="请选择签到状态">
                            <el-option v-for="item in statusArr" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item>
                            <el-button :icon="Search" type="primary" @click="onSearch">
                                搜索
                            </el-button>
                            <el-button :icon="Refresh" @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>


        <div class="signButton">
            <el-button type="primary" plain icon="Plus" @click='addSign'>新增签到</el-button>
            <el-button type="danger" plain icon="Delete">删除</el-button>
            <el-button type="warning" plain icon="Download">导出签到记录</el-button>
      </div>


      <div class="signList">
          <el-table  :data="signList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column width="240" label="签到名称" align="left" key="signName" prop="signName" :show-overflow-tooltip="true">
              <template #default="scope">      
                  <span>{{ scope.row.signName}}</span>   
              </template>

            </el-table-column>

            <el-table-column label="开始时间" align="left" prop="startTime" width="240">
              <template #default="scope">
                <span>{{ parseTime(scope.row.startTime) }}</span>
              </template>
            </el-table-column>

            <el-table-column label="结束时间" align="left" prop="endTime" width="240">
              <template #default="scope">
                <span>{{ parseTime(scope.row.endTime) }}</span>
              </template>
            </el-table-column>



            <el-table-column label="签到信息" align="left" key="signInfo" prop="signInfo" :show-overflow-tooltip="true" width="400" />

            <el-table-column label="操作" align="left" width="240" class-name="small-padding fixed-width">
              <template #default="scope">
                
                   <div class="operate">
                        <div style="color: #1890FF;">详情</div>
                        <div @click="editSign(scope.row.id)" style="color: #1890FF;">编辑</div>
                        <div style="color: #F56C6C;">删除</div>
                    </div>
              </template>
            </el-table-column>
          </el-table>
      </div>

      <!-- 新增签到和修改签到弹出层 -->
      <SignDialog  v-model:dialogVisible="dialogVisible" :title="dialogTitle"
    width="700">
        <template #content>
            <SignDialogCon :signId="signId"  @cancel="closeSignDialog"></SignDialogCon>
        </template>
      </SignDialog>
    </div>
</template>

<script setup>
import { Search,Refresh} from "@element-plus/icons-vue";
import { parseTime } from "@/utils/ruoyi"
import SignDialog from "@/components/SignDialog"
import SignDialogCon from "@/components/SignDialogCon"
const { proxy } = getCurrentInstance()

const signForm=ref({

    checkStatus:""
})


const statusArr=ref([
    {
        label:"已签到",
        value:"已签到"
    },
    {
        label:"未签到",
        value:"未签到"
    }
])
const dialogVisible=ref(false)
const dialogTitle=ref("")
// 编辑签到的id
const signId=ref("")
// 用户数据
const signList = ref([
  {
    id:"1",
    signName: "10.1上午签到",
    signInfo: "应签到:41人  -  已签到:35人  -  未签到:6人  -  签到率:93%",
    startTime: "1234567893214",
    endTime:"1834567893214"
  },
  {
    id:"2",
    signName: "10.2下午签到",
    signInfo: "应签到:41人  -  已签到:35人  -  未签到:6人  -  签到率:93%",
    startTime: "1234567893214",
    endTime:"1834567893214"
  }

])

  // 重置表单
  const resetForm = () => {
    proxy.$refs.signFormRef.resetFields();
  }

// 新增签到
const addSign=()=>{
    dialogVisible.value=true
    dialogTitle.value="新建签到"
    signId.value=''
}

// 编辑签到
const editSign=(id)=>{
     dialogVisible.value=true
     dialogTitle.value="修改签到" ,
     signId.value=id  
}

// 签到表格项被选中
const handleSelectionChange=()=>{

}

// 点击搜索
const onSearch=()=>{
}

const closeSignDialog=()=>{
    dialogVisible.value=false
}
</script>

<style lang="scss" scoped>
    .signList{
        margin-top: 30px;
    }
    .operate{
        display: flex; 
        div{
            margin-right: 25px;
            cursor: pointer;
            font-size: 12px;
        }
    }
</style>